<template>
  <div class="commentReply">
    <van-nav-bar
      :title="
        comment.reply_count > 0 ? `${comment.reply_count}条回复` : '暂无回复'
      "
    >
      <template #left>
        <van-icon name="cross" size="18" @click="$emit('close')"/>
      </template>
    </van-nav-bar>

    <div class="commentInfo">
      <!-- 当前评论信息 -->
      <comment-item
        :comment="comment"
        @updateComLike="comment.is_liking = !comment.is_liking"
      ></comment-item>
      <van-divider>评论回复</van-divider>
      <!-- 回复列表 -->
      <comment-list
        :source="comment.com_id"
        type="c"
        :list="replyList"
        @passTotalCount="updateList"
      ></comment-list>
    </div>

    <!-- 点击发布评论 -->
    <div class="publishCommentReply">
      <van-button
        type="info"
        size="small"
        round
        class="publishBtn"
        @click="commentPubShow = true"
        >发评论</van-button
      >
    </div>

    <!-- 弹出层 -->
    <van-popup v-model="commentPubShow" closeable position="bottom">
      <comment-post :target="comment.com_id" @postSuccess="onPostSuccess"
    /></van-popup>
  </div>
</template>

<script>
import CommentItem from './comment_item'
import CommentList from './commentList'
import CommentPost from './commentPost'
export default {
  name: 'CommentReply',
  components: {
    CommentItem,
    CommentList,
    CommentPost
  },
  props: {
    comment: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      replyList: [],
      commentPubShow: false
    }
  },
  created() {
    // console.log(this.comment)
  },
  mounted() {},
  activited() {},
  update() {},
  beforeRouteUpdate() {},
  methods: {
    updateList(totalCount, results) {
      this.replyList.push(...results)
    },
    onPostSuccess(data) {
      // console.log(data)
      // 评论数量+1
      this.comment.reply_count++
      // 关闭弹框
      this.commentPubShow = false
      // unshift 新回复
      this.replyList.unshift(data.new_obj)
    }
  },
  filter: {},
  computed: {},
  watch: {}
}
</script>

<style lang="less" scoped>
.commentReply {
  padding-bottom: 88px;
}
.publishCommentReply {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  height: 88px;
  border-top: 1px solid #d8d8d8;
  display: flex;
  justify-content: center;
  align-items: center;
  .publishBtn {
    width: 60%;
  }
}
.commentInfo {
  position: fixed;
  top: 92px;
  left: 0;
  right: 0;
  overflow-y: auto;
}
</style>
